<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="myCanvas" width="200" height="200" style="border: solid 1px #ccc;">
			您的浏览器不支持 HTML5 canvas 标签。
		</canvas>
		<canvas id="myCanvas2" width="200" height="200" style="border: solid 1px paleturquoise;"></canvas>
		<canvas id="myCanvas3" width="200" height="200" style="border: solid 1px #ccc;"></canvas></br>
		<canvas id="myCanvas4" width="430" height="280" style="border: solid 1px #ccc;"></canvas>
	<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d"); //获取canvas的2d绘图环境对象
			ctx.fillStyle = "#FF0000"; //颜色
			ctx.fillRect(10, 10, 50, 50); //从画布上的（10,10）坐标为起始点，绘制一个宽 高为50px的实心矩形fillRect
			ctx.strokeStyle = "blue"; //颜色
			ctx.strokeRect(70, 10, 50, 50); //从画布上的（70,10）坐标为起始点，绘制一个宽 高为50px的描边矩形storkeRect		

			// 创建渐变
			var grd = ctx.createLinearGradient(0, 10, 200, 0);
			grd.addColorStop(0, "blue");
			grd.addColorStop(1, "white");
			// 填充渐变
			ctx.fillStyle = grd;
			ctx.fillRect(10, 100, 150, 80);
			//绘制直线
			ctx.strokeStyle="#A52A2A"; //颜色
			ctx.moveTo(0, 0);
			ctx.lineTo(100, 100);
			ctx.lineTo(100,200);
			ctx.moveTo(120, 200);
			ctx.lineTo(200,50);
			ctx.stroke();
			//绘制圆弧
			ctx.strokeStyle="green";
			ctx.beginPath(); //开始描述
			ctx.arc(95, 100, 40, 0, 2 * Math.PI); //描述
			ctx.stroke();  //执行
			
			//文字
			var f=document.getElementById("myCanvas3");
			var ftx=f.getContext("2d");
			ftx.font="30px Arial";
			ftx.fillStyle="cornflowerblue";
			ftx.fillText("Hello World",10,50); //实心
			
			ftx.font="30px Arial";
			ftx.strokeStyle="#8A2BE2";
			ftx.strokeText("Hello World",10,110); //空心
			ftx.font="30px Arial";
			ftx.strokeStyle="chartreuse";
			ftx.strokeText("Hello World",10,210);
			
			//图像
			var g=document.getElementById("myCanvas4");
			if(g.getContext){
				var gtx=g.getContext("2d");
				var img=new Image();
				img.src="../img/t0115480eb28886ef02.jpg";
				//img.src="../img/_购物车.png";
				img.onload=function(){
					gtx.drawImage(img,10,10);
				}
			}
			
			//火柴人
			var d=document.getElementById("myCanvas2");
			var dtx=d.getContext("2d");
			dtx.beginPath();
			dtx.arc(95, 50, 20, 0, 2 * Math.PI);
			dtx.stroke();
			dtx.moveTo(100,95); //手
			dtx.lineTo(130, 130);
			
			dtx.moveTo(100,95);
			dtx.lineTo(130, 70);
			
			dtx.moveTo(100,180);//脚
			dtx.lineTo(100, 70);
			
			dtx.moveTo(100,110);
			dtx.lineTo(60, 180);
			dtx.stroke();
		</script>
	</body>

</html>